<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <grandpa></grandpa>
  </div>

  <script src="./libs/vue.js"></script>
  <script>
    // 定义一个全局变量
    const bus = new Vue()

    // 注册组件
    Vue.component('grandpa', {
      template: `
        <div>
          grandpa：
          <father></father>
          <button @click="prepare">准备接收数据</button>
          接收的数据：{{ receive }}
        </div>
      `,
      data() {
        return {
          receive: '这是接收数据的变量'
        }
      },
      methods: {
        handleTransfer(msg) {
          this.receive = msg
        },
        // 准备接收数据
        prepare() {
          console.log('准备接收数据......')
          // 在 event-bus 上绑定事件
          // 在需要接收数据的组件中绑定自定义事件
          bus.$on('imgrandpa', this.handleTransfer)
        }
      }
    })
    Vue.component('father', {
      template: `
        <div>
          father:
          <son></son>
        </div>
      `
    })
    Vue.component('son', {
      template: `
        <div>son <button @click="handleClick">传递数据</button></div>
      `,
      methods: {
        handleClick() {
          // 需要传递数据的组件中，触发对应的事件
          bus.$emit('imgrandpa', '这是从 son 传递给 grandpa 的数据')
        }
      },
    })

    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>